import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Row, Col, Modal, InputNumber, Select,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const { Option } = Select;
const { Item } = Form;

interface AddOrUpdateProps extends FormComponentProps {
  dispatch?: Dispatch;
  INITINFO?: any;
  searchValues: any;
  saveVisible: boolean;
  detail: any;
  changeSaveModal: (saveVisible: boolean) => void;
}

@connect(({ common: { INITINFO } }: any) => ({ INITINFO }))

class AddOrUpdateElem extends Component<AddOrUpdateProps> {
  componentDidMount() {
    this.fetchAction('common/fetchLogisList', { name: '' });
  }

  handleSaveOrUpdate = () => {
    const { form: { validateFields } } = this.props;
    validateFields((errors, values) => {
      if (errors) return;

      let new_values = {};
      Object.entries(values).reduce((origin: any, target: any) => {
        if (target[0] !== 'logisId') target[1] *= 100;
        new_values = { ...new_values, [target[0]]: target[1] };
        return target;
      }, {});

      const { detail: { id }, searchValues: search } = this.props;
      if (id) new_values = { ...new_values, id };
      const params = {
        search,
        ...new_values,
        logisId: values.logisId.key,
      };
      this.fetchAction('saveOrUpdate', params);

      const { changeSaveModal } = this.props;
      changeSaveModal(false);
    });
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const type = typeName.indexOf('common') >= 0
      ? typeName : `partTimeWageAllocationList/${typeName}`;
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({ type, payload });
    }
  }

  render() {
    const {
      saveVisible,
      changeSaveModal,
      form: { getFieldDecorator },
      INITINFO: { logisList },
      detail,
    } = this.props;

    return (
      <Modal
        title="编辑配置"
        visible={saveVisible}
        destroyOnClose
        width={600}
        onOk={this.handleSaveOrUpdate}
        onCancel={() => changeSaveModal(false)}
      >
        <Form hideRequiredMark className="tableListForm">
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col span={24}>
              <Item label="　　　　　　物流中心" colon={false}>
                {getFieldDecorator('logisId', ({
                  initialValue: {
                    key: detail.logisId || (logisList.length > 0 && logisList[0].id),
                    label: detail.logisName || (logisList.length > 0 && logisList[0].name),
                  },
                  rules: [{ required: true, message: '请选择物流中心' }],
                }))(
                  <Select
                    showSearch
                    placeholder="请选择"
                    labelInValue
                    disabled={Boolean(detail.id)}
                    filterOption={(input: any, option: any) => (
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    )}
                  >
                    {logisList.map((item: any) => (
                      <Option value={item.id} key={item.id}>{item.name}</Option>
                    ))}
                  </Select>,
                )}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="　　　　　接驳(元/件)" colon={false}>
                {getFieldDecorator('transhipPrice', ({
                  initialValue: (detail.transhipPrice / 100) || '',
                  rules: [{ required: true, message: '请输入接驳' }],
                }))(
                  <InputNumber min={0.01} step={0.01} style={{ width: '100%' }} placeholder="请输入" />,
                )}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="　　　　　分拣(元/件)" colon={false}>
                {getFieldDecorator('sortingPrice', ({
                  initialValue: (detail.sortingPrice / 100) || '',
                  rules: [{ required: true, message: '请输入分拣' }],
                }))(
                  <InputNumber min={0.01} step={0.01} style={{ width: '100%' }} placeholder="请输入" />,
                )}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="接驳分拣二合一(元/件)" colon={false}>
                {getFieldDecorator('sortingTwoInOnePrice', ({
                  initialValue: (detail.sortingTwoInOnePrice / 100) || '',
                  rules: [{ required: true, message: '请输入接驳分拣二合一' }],
                }))(
                  <InputNumber min={0.01} step={0.01} style={{ width: '100%' }} placeholder="请输入" />,
                )}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="　　　　　投递(元/件)" colon={false}>
                {getFieldDecorator('deliveryPrice', ({
                  initialValue: (detail.deliveryPrice / 100) || '',
                  rules: [{ required: true, message: '请输入投递' }],
                }))(
                  <InputNumber min={0.01} step={0.01} style={{ width: '100%' }} placeholder="请输入" />,
                )}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="批量投递三合一(元/件)" colon={false}>
                {getFieldDecorator('deliveryThreeInOnePrice', ({
                  initialValue: (detail.deliveryThreeInOnePrice / 100) || '',
                  rules: [{ required: true, message: '请输入批量投递三合一' }],
                }))(
                  <InputNumber min={0.01} step={0.01} style={{ width: '100%' }} placeholder="请输入" />,
                )}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="　　　　　盘点(元/件)" colon={false}>
                {getFieldDecorator('inventoryPrice', ({
                  initialValue: (detail.inventoryPrice / 100) || '',
                  rules: [{ required: true, message: '请输入盘点' }],
                }))(
                  <InputNumber min={0.01} step={0.01} style={{ width: '100%' }} placeholder="请输入" />,
                )}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="　　　　问题件(元/件)" colon={false}>
                {getFieldDecorator('problemPrice', ({
                  initialValue: (detail.problemPrice / 100) || '',
                  rules: [{ required: true, message: '请输入问题件' }],
                }))(
                  <InputNumber min={0.01} step={0.01} style={{ width: '100%' }} placeholder="请输入" />,
                )}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="　　　　　揽件(元/件)" colon={false}>
                {getFieldDecorator('sendPrice', ({
                  initialValue: (detail.sendPrice / 100) || '',
                  rules: [{ required: true, message: '请输入揽件' }],
                }))(
                  <InputNumber min={0.01} step={0.01} style={{ width: '100%' }} placeholder="请输入" />,
                )}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="　　　　　取件(元/件)" colon={false}>
                {getFieldDecorator('pickupPrice', ({
                  initialValue: (detail.pickupPrice / 100) || '',
                  rules: [{ required: true, message: '请输入取件' }],
                }))(
                  <InputNumber min={0.01} step={0.01} style={{ width: '100%' }} placeholder="请输入" />,
                )}
              </Item>
            </Col>
            <Col span={24}>
              <Item
                label="　　　OCR校验(元/件)"
                colon={false}
                className="marginB0Import"
              >
                {getFieldDecorator('ocrCheckPrice', ({
                  initialValue: (detail.ocrCheckPrice / 100) || '',
                  rules: [{ required: true, message: '请输入取件' }],
                }))(
                  <InputNumber
                    min={0.01}
                    step={0.01}
                    style={{ width: '100%' }}
                    placeholder="请输入"
                  />,
                )}
              </Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create<AddOrUpdateProps>()(AddOrUpdateElem);
